<template>
    <div class="wrapper loginsign"> 
   <div class="item signup"> 
    <div class="form" > 
    <h3 class="loginsign-title"><img width="100%" src="~/assets/img/lunbo/a.jpg" alt="" /></h3> 
     <!--  <form class="sui-form"> 
      <div class="control-group"> 
       <label for="inputname" class="control-label">名字</label> 
       <div class="controls"> 
        <input type="text" id="inputname" placeholder="真实姓名或常用昵称" class="input-xlarge" v-model="pojo.nickname"/> 
       </div> 
      </div> 
      <div class="different"> 
       <div class="radio-content"> 
        <div id="a1" class="phone"> 
         <div class="control-group number"> 
          <input type="text" placeholder="仅支持大陆手机号" class="input-xlarge"  v-model="pojo.mobile"/> 
         </div> 
         <div class="control-group code"> 
          <div class="input-append"> 
           <input id="appendedInputButton" type="text" placeholder="短信验证" class="span2 input-large msg-input" v-model="code" /> 
           <button type="button" class="sui-btn msg-btn" @click="sendsms">获取验证码</button> 
          </div> 
         </div> 
         <div class="control-group"> 
          <label for="inputpassword" class="control-label">密码</label> 
          <div class="controls"> 
           <input type="text" id="inputpassword" placeholder="请输入6-16位密码" class="input-xlarge" v-model="pojo.password" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="control-group btn-signup"> 
       <label class="control-label"></label> 
       <div class="controls"> 
        <label> <input type="checkbox" /><span class="type-text" style="font-size:12px;">同意协议并接受《服务条款》</span> </label> 
        <button type="button" class="sui-btn btn-danger btn-yes" @click="register">注 册</button> 
       </div> 
      </div> 
     </form>  -->
    </div> 
   </div> 
   <div class="item"> 
    <div class="form" style="height:450px"> 
     <h3 class="loginsign-title">用户登录</h3> 
     <form class="sui-form login-form"> 
      <div class="control-group"> 
       <label for="inputname" class="control-label">手机号：</label> 
       <div class="controls"> 
        <input type="text" id="inputname" placeholder="11位手机号" class="input-xlarge" data-rules="required" v-model="mobile" /> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label for="inputpassword" class="control-label">密码：</label> 
       <div class="controls"> 
        <input type="text" id="inputpassword" placeholder="输入登录密码" class="input-xlarge" v-model="password"/> 
       </div> 
      </div> 
      <div class="controls"> 
       <label> <input type="checkbox" name="remember-me" /><span class="type-text" style="font-size:12px;">记住登录状态</span> </label> 
       <button type="button" class="sui-btn btn-danger btn-yes" @click="login">登 录</button> 
      </div> 
      <div class="other-methods"> 
      </div> 
     </form> 
     <router-link to="/register" >立即注册</router-link> 
     <!-- <router-link to="/article" tag="li" active-class="active"><a>博客</a></router-link> -->
    </div> 
    
   </div> 
  </div>   
  
</template>

<script>
import '@/assets/css/page-sj-person-loginsign.css'
import  userApi from '@/api/user'
import {setUser} from '@/utils/auth'

export default {
   layout:'loginlayout',
   data(){
      return{
         pojo:{},
         code:'',
         mobile:'',
         password:''
      }
   },
   methods:{
       sendsms(){
           userApi.sendsms(this.pojo.mobile).then(res=>{
              this.$message({
                    message: res.data.message,
                    type: (res.data.flag?'success':'error')
                })
           })
       },
       register(){
          userApi.register(this.code,this.pojo).then(res=>{
             this.$message({
                    message: res.data.message,
                    type: (res.data.flag?'success':'error')
             })

             if(res.data.flag){
                this.pojo= {}
                this.code= ''
             }
          })
       },
       login(){
          userApi.login(this.mobile,this.password).then(res=>{
             //1保存信息到cookie  2跳转页面
             if(res.data.flag){
                setUser(res.data.data.token,res.data.data.name,res.data.data.avatar)
                this.$router.push("/")
             }else{
               this.$message({
                  message: res.data.message,
                  type: 'error'
               })
             }
          })
       }
   }


}
</script>